<script>
        var BASE_URL = '<?php echo base_url() ?>' + 'index.php/';
        var BASE_PATH = '<?php echo base_url() ?>';
        var BASE_ICONS = '<?php echo base_url() ?>' + 'assets/icons/';
        var BASE_UX = '<?php echo base_url() ?>' + 'js/ext/ux';

        Ext.Loader.setConfig({enabled: true});

        Ext.Loader.setPath('Ext.ux', BASE_UX);
        Ext.require([
            'Ext.grid.*',
            'Ext.data.*',
            'Ext.util.*',
            'Ext.toolbar.Paging',
            'Ext.ux.PreviewPlugin',
            'Ext.ModelManager',
            'Ext.tip.QuickTipManager'
        ]);

        Ext.onReady(function(){
            Ext.tip.QuickTipManager.init();

            var urlApp = '<?php echo base_url() ?>' + 'index.php/';

            Ext.define('data_model', {
                extend: 'Ext.data.Model',
                fields: [
                    'NIM','NAMA','STATUS','JENIS_KELAMIN'
                ]
            });

            // create the Data Store
            var store = Ext.create('Ext.data.Store', {
                pageSize: 18,
                model: 'data_model',
                proxy: {
                    // load using script tags for cross domain, if the data in on the same domain as
                    // this page, an HttpProxy would be better
                    type: 'ajax',
        	        headers: { 'Content-Type': 'application/json; charset=UTF-8' },
                    api: {
                        read: urlApp + 'sima_bimbingan/bimbinganControllerSima/viewMahasiswaPAext/'
                    },
                    reader: {
                        type: 'json',
        		        successProperty: 'success',
        		        root: 'data',
        		        messageProperty: 'message',
                        totalProperty: 'results'
                    },
                    listeners: {
                        exception: function(proxy, response, operation){
                            Ext.MessageBox.show({
                                title: 'REMOTE EXCEPTION',
                                msg: operation.getError(),
                                icon: Ext.MessageBox.ERROR,
                                buttons: Ext.Msg.OK
                            });
                        }
        		    }
                }
            });

            /**
             * Custom function used for column renderer
             * @param {Object} val
             */
            function statusValidasi(val){
                if(val == 0){
                    return '<span class="active_student">KRS SUDAH DIVALIDASI</span>';
                }else if(val == -1){
                    return 'BELUM ADA DATA KRS';
                }
                else
                {
                    return '<span class="alert">KRS BELUM DIVALIDASI</span>';
                }
            }

            var grid = Ext.create('Ext.grid.Panel', {
                width: 700,
                height: 500,
                title: 'LAPORAN STATUS VALIDASI KRS MAHASISWA - SEMESTER <?php echo $info_semester ?> <?php echo $info_tahun ?>',
                store: store,
                disableSelection: true,
                loadMask: true,
                // grid columns
                columns:[
                  new Ext.grid.RowNumberer({width: 50}),
                  {
                    text: "NIM",
                    dataIndex: 'NIM',
                    width: 100,
                    sortable: false
                },{
                    text: "NAMA MAHASISWA",
                    dataIndex: 'NAMA',
                    width: 150,
                    sortable: false
                },{
                    text: "STATUS",
                    dataIndex: 'STATUS',
                    width: 240,
                    sortable: false
                },{
                    text: "JENIS_KELAMIN",
                    dataIndex: 'JENIS_KELAMIN',
                    width: 240,
                    sortable: false
                }
                ],
                // paging bar on the bottom
                bbar: Ext.create('Ext.PagingToolbar', {
                    store: store,
                    displayInfo: true,
                    displayMsg: 'Data ke: {0} - {1} dari {2}',
                    emptyMsg: "Data tidak tersedia"
                }),
                renderTo: 'divgrid'
            });

            // trigger the data store load
            store.loadPage(1);
        });
</script>

<div id="divgrid"></div>